<template>
  <div class="home">
    <el-container>
      <el-header>
        <strong class="myTitle">⚡雷神电巡系统&nbsp;&nbsp;&nbsp;</strong>
        <span class="time"><i class="el-icon-time"></i>{{this.getDate}}</span>
        <div class="header-avatar">
           <span>
              角色:{{userInfo.roleName}}
            </span>
          <el-dropdown>
            <span class="el-dropdown-link">
              欢迎：{{ userInfo.username }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            &nbsp;&nbsp;&nbsp;
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <router-link to="/userCenter">修改密码</router-link>
              </el-dropdown-item>
              <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside width="220px">
          <SideMenu></SideMenu>
        </el-aside>
        <el-main>
          <Tabs></Tabs>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Tabs from "@/views/inc/Tabs";
import SideMenu from "@/views/inc/SideMenu";
export default {
  name: 'Home',
  components: {
    SideMenu,
    Tabs
  },
  data() {
    return {
      userInfo: {
      },
      getDate:new Date(),
    }
  },
  methods:{
    logout(){
      let flag=this;
      this.$axios.post("/logout").then(function (result) {
        localStorage.clear();
        sessionStorage.clear();
        flag.$store.commit("resetState");
        flag.$router.push("/login");
      })
    },
    getUserInfo(){
      this.$axios.get("/nb/user/getHeadInfo").then(result=>{
        this.userInfo=result.data.data;
        this.$store.commit('setIUserName',result.data.data.username);
      })
    }
  },
  created() {
    this.getUserInfo();
  },
  mounted() {
    this.timer = setInterval(()=> {
     this.getDate = new Date().toLocaleString();

    });
  },
  beforeDestroy: function() {

  },

}
</script>
<style>
.header-avatar {
  cursor: pointer;
  float: right;
  width: 310px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.home{
  height: 100%;
}
.el-header {
  background-color: #409EFF;
  color: white;
  text-align: center;
  line-height: 60px;
}
.el-dropdown-link{
  cursor: pointer;
  color: white;
}
.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  height: 100%;
}
.el-container{
  height: 100%;
}
.time{
  display: flex;
  float: left;
  align-items: center;
}
.myTitle{
  display: flex;
  float: left;
  font-size: 30px;
  font-family: 幼圆;
}
</style>